<template>
  <div class="home">
    <!-- swipe -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image,index) in imageList" :key="'image_'+index">
        <van-image :src="image" class="image" fit="cover" />
      </van-swipe-item>
    </van-swipe>
    <div class="grid_group">
      <!-- grid view -->
      <!-- <van-grid>
        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
        <van-grid-item icon="photo-o" text="文字"></van-grid-item>
      </van-grid> -->
      <!-- 分类 -->
      <van-grid :column-num="5">
        <van-grid-item :to="item.link" :icon="item.icon" :text="item.title" v-for="(item,index) in menus" :key="'menu'+index"></van-grid-item>
      </van-grid>
    </div>

    <!-- 抢购商品 -->
    <div class="products_group">
      <!-- 倒计时 -->
      <!-- <van-count-down :time="time" /> -->
      <!-- 更多 -->
      <div class="more"><div>特价商品</div><span class="more_text" @click="clickMoreBtn">更多</span></div>
      <!-- 展示列表 -->
      <van-grid :column-num="2" square>
        <van-grid-item v-for="disCountProduct in disCountProducts" :key="disCountProduct.id" badge="抢购">
          <product-item :product="disCountProduct"></product-item>
        </van-grid-item>
      </van-grid>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src
import ProductItem from '../components/ProductItem.vue'
import { IMAGE_PREFIX } from '../config'
export default {
  name: 'Home',
  components: {
    ProductItem
  },
  data () {
    return {
      // 主页分类菜单
      menus: [
        {
          title: '新鲜水果',
          icon: require('../assets/image/index_icon/fruit_icon.png'),
          link: '/cate?type=1'
        },
        {
          title: '新鲜蔬菜',
          icon: require('../assets/image/index_icon/vegetables.png'),
          link: '/cate?type=2'
        },
        {
          title: '海鲜水产',
          icon: require('../assets/image/index_icon/fish.png'),
          link: '/cate?type=3'
        },
        {
          title: '肉禽蛋品',
          icon: require('../assets/image/index_icon/rou.png'),
          link: '/cate?type=4'
        },
        {
          title: '粮油熟食',
          icon: require('../assets/image/index_icon/wheat__easyic.png'),
          link: '/cate?type=5'
        }
      ],
      // 轮播图图片列表
      imageList: [],
      // 促销商品列表
      disCountProducts: []
    }
  },
  methods: {
    /**
     * 获取首页所需数据
     */
    getIndexPage () {
      // this.$http.get('/test').then(({ data }) => {
      //   console.log(data)
      // })
      // MOCK 首页轮播图
      this.imageList = [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    },
    /**
     * 业务： 获取首页展示的分类商品
     */
    getDiscountProduct () {
      this.$http.get('/home/discount')
        .then(({ data: resp }) => {
          const { meta, data } = resp
          if (meta.code !== 200) {
            return this.$notify(meta.msg)
          }
          // 解析数据
          this.disCountProductParser(data)
        })
        .catch(error => {
          this.$notify(error)
        })
    },
    // 解析数据
    disCountProductParser (backData) {
      const disCountProducts = []
      backData.map(({ id, product }) => {
        const price = product.list[0].price
        const { id: productId, name, image: imageStr } = product
        const productObj = {}
        const image = IMAGE_PREFIX + imageStr.split(';')[0]
        productObj.name = name
        productObj.id = productId
        productObj.image = image
        productObj.price = price
        disCountProducts.push(productObj)
      })
      // console.log(disCountProducts)
      this.disCountProducts = disCountProducts
    },
    // 点击 更多按钮
    clickMoreBtn () {
      // this.$notify({ type: 'warning', message: '点击更多按钮' })
      this.$router.push('/all_product')
    }
  },
  created () {
    this.getIndexPage()
    this.getDiscountProduct()
  }
}
</script>

<style scoped lang="less">
.home{
  height: cacl(100vh-50px);
  width:100%;
  .my-swipe .van-swipe-item {
    width:100%;
  }
  .van-swipe-item {
    .image{
      width:100%;
      height: 200px !important;
    }
  }
  .grid_group{
    width:100%;
    box-sizing: border-box;
    box-shadow: 0 0 2px #ddd;
  }
  .products_group{
    width:100%;
    margin-top:20px;
    box-sizing: border-box;
    .more{
      width:100%;
      height: 30px;
      display:flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding:5px;
      div{
        height: 100%;
        box-sizing: border-box;
        border-left: 4px solid #f40;
        padding-left:5px;
      }
      .more_text{
        font-size: 14px;
        color: #3498db;
      }
      .more_text:after{
        content:'>>>';
      }
    }
  }
}

</style>
